*{
	margin:0;padding:0;
}

body{
	background-color: #fff;
	color: #555;
	font-family: 'Avenir Next', 'lantinghei SC';
	font-size: 14px;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;

}

.wrap{
	width: 100%;
	height: 660px;
	position: absolute;
	top:50%;
	margin-top: -330px;
	background-color: #333;
	overflow: hidden;
	-webkit-perspective:800px;
	-moz-perspective:800px;
}

.photo{
	width: 260px;
	height: 320px;
	position: absolute;
	z-index: 1;
	box-shadow: 0 0 1px rgba(0,0,0,.01);
	/*transform: rotateY(40deg);*/
	-webkit-transition:all .6s;
	-moz-transition:all .6s;

	top:50%;
	left: 50%;
	margin:-145px 0 0 -260px;

}
.photo .side{
	width: 100%;
	height: 100%;
	background-color: #eee;
	position: absolute;
	top: 0px;
	right: 0px;
	padding:20px;
	box-sizing:border-box;

}
/*.photo .side-front{
	

}*/
.photo .side-front .image {
	width: 100%;
	/* height: 250px; */
	line-height: 250px;
	overflow: hidden;


}
.photo .side-front .image img{
	width: 100%
}
.photo .side-front .caption{
	text-align: center;
	font-size: 16px;
	line-height: 50px;
} 
.photo .side-back{
	padding:3em;

}
.photo .side-back .desc{
	color: #666;
	font-size:14px;
	line-height: 1.5em;

}
.photo-center{
	width:520px !important;
	top:50%;
	left:50%;
	height: 520px;
	margin:-260px 0 0 -260px;
	z-index: 99999;
}
.photo-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-webkit-transition:all .6s;
	-moz-transition:all .6s;
}
.photo-wrap .side-front{
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	/*display: none;*/
}
.photo-wrap .side-back{
	-webkit-transform:rotateY(180deg);
}
.photo-wrap .side{
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
}
.photo_front .photo-wrap{
	-webkit-transform:translate( 0px , 0px) rotateY(0deg);
	-moz-transform:translate( 0px , 0px) rotateY(0deg);

}
.photo_back .photo-wrap{
	-webkit-transform:translate( 260px , 0px) rotateY(180deg);
	-moz-transform:translate( 260px , 0px) rotateY(180deg);
}
@font-face {
  font-family: 'icomoon';
 
  src:  url('icomoon.woff') format('woff');
   
  font-weight: normal;
  font-style: normal;
}
.nav{
	width: 80%;
	height: 30px;
	line-height: 30px;
	position: absolute;
	left:10%;
	bottom: 20px;
	z-index: 999;
	/*background-color: #fff;*/
	text-align: center;
}
.nav .i{
	width: 42px;
	height: 42px;
	display: inline-block;
	cursor: pointer;
	background-color: #aaa;
	text-align: center;
	border-radius: 50%;
	-webkit-transform:scale(.48);
	-moz-transform:scale(.48);
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
}
.nav .i:after{
	content: "\e965";
	font-family: 'icomoon' !important;
	font-size: 80%;
	display: inline-block;
	line-height: 30px;
	text-align: center;
	color: #fff;
	position: relative;
	left: -4px;
	top:-2px;
	opacity: 0;

}
.nav .i_current{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
}
.nav .i_current:after{
	opacity: 1;
}
.nav .i_back{
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	background-color: #555;
}
.photo-wrap{
	-webkit-transform-origin:0% 50%;
	-moz-transform-origin:0% 50%;
}
.ckepop{
	float: right
}